<template>
  <div class="search">
    <van-nav-bar
      left-text=""
      right-text="搜索"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #title>
        <div>
          <van-search v-model="value" />
        </div>
      </template>
    </van-nav-bar>

    <van-tabs type="card" v-model="active">
      <van-tab title="推荐"></van-tab>
      <van-tab title="新品"></van-tab>
      <van-tab title="价格">内容 3</van-tab>
    </van-tabs>

    <van-list>
      <van-cell />
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss">
.search {
  .van-nav-bar {
    .van-icon {
      color: #656771;
    }
  }
  .van-nav-bar__right {
    background-color: #1baeae;
    .van-nav-bar__text {
      color: #fff;
    }
  }
  .van-tabs__wrap {
    margin-top: 20px;
    .van-tabs__nav--card {
      border: 1px solid rgb(27, 174, 174);
      .van-tab {
        color: rgb(27, 174, 174);
        &:not(:last-child) {
          border-right: 1px solid rgb(27, 174, 174);
        }
      }
    }
    .van-tabs__nav--card .van-tab.van-tab--active {
      background-color: rgb(27, 174, 174);
      color: #fff;
    }
  }
}
</style>